<template>
    <div class="yx-images-box" :style="padding">
        <Hover v-if="hover.showHover" :brickInfo="brickInfo" :hover="hover"/>
        <img v-if="content.urls.length===0"
             class="default-image-item"
             id="deault-img"
             src="./imgs/default.png">
        <div v-else class="swipe-box" :style="height">
            <swipe class="yx-swipe"
                   :style="height"
                   :ref="`yxSwipe${brickInfo.index}`"
                   :auto="autoplay"
                   :defaultIndex="0"
                   :no-drag-when-single="config.ndws"
                   @change="changeSwipe">
                <swipe-item class="slide"
                            v-for="(item, index) in content.urls"
                            :key="index">
                    <img :src="item.path" class="slide-img">
                </swipe-item>
            </swipe>
        </div>
    </div>
</template>

<script>
    import Hover from '../common/mainpage/Hover.vue';
    import {Swipe, SwipeItem} from 'vue-swipe';

    export default {
        name: 'YXImages',
        props: {
            hover: {
                type: Object,
                default: _ => {
                    return {
                        showHover: false,
                        brickHover: true,
                        isSaved: true
                    };
                }
            },
            isEdit: {
                type: Boolean,
                default: false
            },
            brickInfo: {
                type: Object,
                default: _ => {
                    return {
                        active: false,
                        index: 0
                    };
                }
            },
            content: {
                type: Object,
                default: _ => {
                    return {
                        // currentIndex: 0,
                        height: 160,
                        autoplay: false,
                        urls: []
                    };
                }
            },
            appearance: {
                type: Object,
                default: _ => {
                    return {
                        padding: {
                            top: 0,
                            right: 0,
                            bottom: 0,
                            left: 0
                        }
                    };
                }
            }
        },
        components: {
            Hover,
            Swipe,
            SwipeItem
        },
        watch: {
            content: {
                handler(newContent, oldContent) {
                    try {
                        this.goto(0);
                    } catch (e) {
                        return;
                    }
                },
                deep: true,
                immediate: false
            }
        },
        data() {
            return {
                config: {
                    auto: 0,
                    ndws: false
                }
            };
        },
        computed: {
            autoplay() {
                return this.content.autoplay ? 3000 : 0;
            },
            padding() {
                let ap = this.appearance.padding;
                return `padding: ${ap.top}px ${ap.right}px ${ap.bottom}px ${ap.left}px;`;
            },
            height() {
                // let isPL = /h5.vbbobo.com/i.test(window.document.domain);
                let _w = document.body.clientWidth;
                let _h = this.isEdit ? this.content.height : this.content.height * _w / 375;

                return `height: ${_h}px;`;
            }
        },
        methods: {
            goto(index) {
                this.$refs[`yxSwipe${this.brickInfo.index}`].goto(index);
            },
            changeSwipe(newIndex, oldIndex) {
                // console.log(`swipe from ${oldIndex} to ${newIndex}`);
            }
        }
    }
</script>

<style scoped lang="scss">
    $color-409EFF: #409EFF;
    .yx-images-box {
        position: relative;
        @import '../../../../node_modules/vue-swipe/dist/vue-swipe.css';

        .default-image-item {
            width: 100%;
            vertical-align: middle;
        }
        .swipe-box {
            width: 100%;

            .yx-swipe {
                .mint-swipe-items-wrap {
                    .slide {
                        .slide-img {
                            width: 100%;
                            vertical-align: top;
                        }
                    }
                }
                .mint-swipe-indicator.is-active {
                    width: 20px;
                    background-color: $color-409EFF;
                }
            }
        }
    }
</style>
<style lang="scss">
    $color-409EFF: #409EFF;
    .yx-images-box {
        .swipe-box {
            .yx-swipe {
                .mint-swipe-items-wrap {
                    height: 100%;
                }
                .mint-swipe-indicators {
                    width: fit-content;
                    height: 20px;
                    position: absolute;
                    right: 10px;
                    bottom: 5px;

                    .mint-swipe-indicator {
                        width: 8px;
                        height: 8px;
                        display: inline-block;
                        border-radius: 4px;
                        background: rgba(#000, .5);
                        margin: 0 3px;
                    }
                    .mint-swipe-indicator.is-active {
                        width: 18px;
                        background-color: $color-409EFF;
                    }
                }
            }
        }
    }
</style>
